<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { Edit, Search, Delete, Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {
  type AssetDto,
  type SearchAssetDto,
  type AddAssetDto,
  type AssetCategoryNode,
} from '@/api/ams'
import { getAssetPage, getAssetTypeList, getAssetCategoryTree, addAsset, delAsset } from '@/api/ams'

defineOptions({
  name:"Asset"
})


const searchDto = reactive<SearchAssetDto>({
  assetCode: '',
  labelCode: '',
  name: '',
  pageNum: 1,
  pageSize: 10,
})

const tableData = ref<AssetDto[]>([])
const pagination = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1,
})
const isAddDialog = ref(true) // 是否为添加模式
const showDialog = ref(false) // 是否显示模态框
const dialogForm = reactive<AddAssetDto>({})
const formLabel = ref<string[]>()

const clickSubDialogForm = () => {
  const addData: AddAssetDto = {
    assetCode: dialogForm.assetCode,
    labelType: dialogForm.labelType,
    labelCode: dialogForm.labelCode,
    typeId: dialogForm.typeId,
    name: dialogForm.name,
    categoryId: dialogForm.categoryId,
    tag: '',
    description: dialogForm.description,
  }
  addData.tag = formLabel.value!.join(',')
  addAsset(addData).then(() => {
    clickSearchBtn()
    showDialog.value = false
  })
}
const clickSearchBtn = () => {
  getAssetPage(searchDto).then((res) => {
    tableData.value = res.list
    pagination.total = res.total
  })
}
onMounted(() => {
  clickSearchBtn()
  getAssetTypeList().then((res) => {
    res.forEach((item) => {
      optionsType.value.push({
        value: item.id,
        label: item.name,
      })
    })
  })
  getAssetCategoryTree().then((res) => {
    optionsCategory.value = res
  })
})

const clickAddBtn = () => {
  isAddDialog.value = true
  showDialog.value = true
  formLabel.value = []
  dialogForm.labelType = 'RFID'
}

const clickDelBtn = (id: string) => {
  delAsset(id).then(() => {
    clickSearchBtn()
  })
}
const clickDetailBtn = (id: string) => {
  console.log(id)
  ElMessage.warning('定制功能，根据资产类型不同展示不同页面和信息！')
}

interface optionDto {
  value: string
  label: string
}
const optionsType = ref<optionDto[]>([])
const optionsCategory = ref<AssetCategoryNode[]>([])
</script>

<template>
  <div>
    <el-dialog
      v-model="showDialog"
      :title="isAddDialog ? '添加资产信息' : '更新资产信息'"
      width="500"
    >
      <el-form :model="dialogForm" label-width="auto" style="max-width: 600px">
        <el-form-item label="资产编号">
          <el-input v-model="dialogForm.assetCode" />
        </el-form-item>
        <el-form-item label="标签类型">
          <el-input v-model="dialogForm.labelType" />
        </el-form-item>
        <el-form-item label="标签编码">
          <el-input v-model="dialogForm.labelCode" />
        </el-form-item>
        <el-form-item label="资产类型">
          <el-select v-model="dialogForm.typeId" placeholder="请选择资产类型">
            <el-option
              v-for="item in optionsType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="资产分类">
          <el-tree-select
            v-model="dialogForm.categoryId"
            :data="optionsCategory"
            check-strictly
            :render-after-expand="false"
            placeholder="请选择资产分类"
          />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="dialogForm.name" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="dialogForm.description" :rows="2" type="textarea" placeholder="" />
        </el-form-item>
        <el-form-item label="标签">
          <el-input-tag
            v-model="formLabel"
            placeholder="请输入标签"
            aria-label="Please click the Enter key after input"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="clickSubDialogForm"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-row>
      <el-col>
        <el-card>
          <el-row class="mb-5">
            <el-col>
              <el-input
                v-model="searchDto.assetCode"
                class="max-w-xs mr-5 width"
                placeholder="请输入资产编号"
                clearable
              />
              <el-input
                v-model="searchDto.labelCode"
                class="max-w-xs mr-5 width"
                placeholder="请输入标签编号"
                clearable
              />
              <el-input
                v-model="searchDto.name"
                class="max-w-xs mr-5 width"
                placeholder="请输入资产名称"
                clearable
              />
              <el-button type="primary" :icon="Search" @click="clickSearchBtn">查询</el-button>
              <el-button type="primary" :icon="Plus" @click="clickAddBtn">添加</el-button>
            </el-col>
          </el-row>
          <el-table :data="tableData" stripe style="width: 100%" show-overflow-tooltip>
            <el-table-column type="index" width="50" label="#" />
            <el-table-column prop="assetCode" label="资产编号" width="100" />
            <el-table-column prop="labelType" label="标签类型" />
            <el-table-column prop="labelCode" label="标签编码" />
            <el-table-column prop="typeName" label="资产类型">
              <template #default="scope">
                <el-tag :type="scope.row.typeId == 1 ? 'primary' : 'info'">{{
                  scope.row.typeName
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="资产分类" />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="description" label="描述" />
            <el-table-column prop="tag" label="标签"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
              <template #default="scope">
                <el-link
                  :icon="Edit"
                  type="primary"
                  class="mr-3"
                  @click="clickDetailBtn(scope.row.id)"
                  >详情</el-link
                >
                <el-link
                  :icon="Delete"
                  type="primary"
                  class="mr-3"
                  @click="clickDelBtn(scope.row.id)"
                  >删除</el-link
                >
                <el-dropdown>
                  <el-link type="primary">
                    更多<el-icon><ArrowDown /></el-icon>
                  </el-link>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item v-if="scope.row.typeId == 3">设置数量</el-dropdown-item>
                      <el-dropdown-item>更新价格</el-dropdown-item>
                      <el-dropdown-item>更新有效期</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="mt-5"
            layout="prev, pager, next"
            :hide-on-single-page="pagination.total / pagination.pageSize < 2"
            :total="pagination.total"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.width {
  width: 200px;
}
.el-dropdown {
  display: contents;
}
</style>
